<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电子申报系统</title>

    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <!-- 引入element 的组件库-->
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

    <!--引入layui组件-->
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>

    <style>

        .d2{
            width: 95%;
            margin: 15px;
        }
    </style>

</head>
<body>
<div id="app"  >
    <div>

        <div class="d2">
            <el-transfer
                    style="width: 100%;"
                    size="mini"
                    :titles = "titles"
                    filterable
                    filter-placeholder="请输入字段名称"
                    @change="changeTansfer"
                    v-model="value"
                    :data="transferData">
            </el-transfer>
        </div>
        <div class="d2">
            <el-table
                    :data="tableData"
                    border
                    style="width: 85%">
                <el-table-column
                        prop="show_name"
                        label="字段中文名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="col_name"
                        label="字段名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="col_style"
                        label="查询类型">
                </el-table-column>
                <el-table-column
                        prop="show_order"
                        label="排序号">
                </el-table-column>
                <el-table-column
                        prop="cz"
                        label="操作">
                    <template slot-scope="scope">
                            <el-button type="text" @click="setColtype(scope.row['id'])" size="small">设置字段类型</el-button>
                            <el-button type="text" @click="delCol(scope.row['id'])"  size="small" >删除</el-button>
                    </template>

                </el-table-column>

            </el-table>
        </div>
    </div>

</div>
</body>
<script>

    var vm = new Vue({
        el:"#app",
        data:{
            titles:["未选择字段","已选择字段"],
            transferData: [],
            value: [],
            tableData:[],
            tableId:"",
            parmsData:{},
        },
        created(){
            this.parmsData = getParams();
            this.tableId = this.parmsData.tableId;
            this.getdata();
            this.getListdata();
        },
        methods:{
            async changeTansfer(e){
                let param = {ids:""+this.value,tableId:this.tableId};
                var i = top.load();
                postBody("/admin/api/DataManagementController/insertCustomNew",param,function (resobj) {
                    top.layer.close(i);
                    top.alert(resobj.msg);
                    vm.getdata();
                    vm.getListdata();
                })
            },
            delCol(id){
                var i = top.load();
                post("/admin/api/DataManagementController/deleteDictSearch",{id:id},function (resData) {
                    top.layer.close(i);
                    top.alert(resData.msg);
                    vm.getdata();
                    vm.getListdata();
                })

            },
            setColtype(id){
                post("/admin/api/DataManagementController/getCustomDictForId",{colType:top.data.custom,id:id},function (resData) {
                    let btn = {btn: ['确定', '取消']
                        ,yes: function(index, layero){
                            console.log(layero);
                            //按钮【按钮一】的回调
                            var win = getTopIframe(layero);
                            var selectData = win.getData();
                            var i = top.layer.load();
                            selectData.id = id
                            postBody("/admin/api/DataManagementController/setColStyle", {mapdata:selectData,colType:top.data.custom},function (res) {
                                top.layer.close(i);
                                top.alert(res.msg);
                                vm.getListdata();
                            })
                        }
                        ,btn2: function(index, layero){
                            //按钮【按钮二】的回调
                            //return false 开启该代码可禁止点击该按钮关闭
                        }};
                    let urlhtml = "/admin/html/dataManagement/optionsSelect.html";
                    if(top.data.custom == "IS_INPUT"){
                        urlhtml = "/admin/html/dataManagement/optionsSelectInput.html";
                    }
                    top.f_layer_open_get(urlhtml,"30%","60%",function () {

                    },btn,"设置字段类型",resData.data);
                })
            },
            async getdata(){
                const res = await post("/admin/api/DataManagementController/searchCustomPage",{zygl_id:this.tableId});
                let col_list = res.data.listAll;
                this.transferData = [];
                col_list.forEach((e)=>{
                    this.transferData.push({key:e.id,label:e.show_name,value:e.id});
                })
                this.value = res.data.values;
            },
            async getListdata(){
                const res = await postBody("/admin/api/DataManagementController/customRightList",{zygl_id:this.tableId,colType:top.data.custom,pageNumber:1,pageSize:500});
                this.tableData = res.data.rows;
                console.log(this.tableData)
            },
        }
    });
</script>
</html>